<template>
	<view class="u-p-20">
		<view class="box">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="name">
					<u-input v-model="form.name" placeholder='*请输入业主姓名' />
				</u-form-item>
				<u-form-item prop="mobile">
					<u-input v-model="form.mobile" placeholder='*请输入业主电话(必填)' />
				</u-form-item>
				<u-form-item prop="content">
					<u-input type='textarea' v-model="form.content" placeholder='*请输入投诉内容(必填)' />
				</u-form-item>
			</u-form>
			<u-upload ref='uUpload' :action="action" max-count='1' :file-list="fileList"></u-upload>
			<u-button type='primary' plain @click="submit" :loading='loading'>提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		$url,$imgUrl
	} from '@/service/request.js'
	import {
		saveAdvice
	} from '@/api/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo','itemInfo'])
		},
		onLoad(e) {
			if(e&&e.id){
				this.form={
					id: this.itemInfo.id,
					mobile: this.itemInfo.mobile,
					name: this.itemInfo.name,
					content: this.itemInfo.content
				}
				if(this.itemInfo.photo){
					this.fileList=[
						{
							url:this.itemInfo.photo
						}
					]
					this.form.photo = ''
				}
				uni.setNavigationBarTitle({
					title:'修改投诉'
				})
			}else{
				this.form = {
					...this.form,
					name: this.userInfo.name,
					mobile: this.userInfo.mobile
				}
			}
		},
		data() {
			return {
				// 演示地址，请勿直接使用
				action: `${$url}/jproperty/a/upload`,
				loading: false,
				fileList:[],
				form: {
					name: '',
					mobile: '',
					content: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入业主姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					content: [{
						required: true,
						message: '请输入投诉内容',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
				}
			};
		},
		methods: {
			submit() {
				this.$u.debounce(
					this.$refs.uForm.validate(valid => {
						if (valid) {
							this.loading = true
							let files = [];
							// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
							files = this.$refs.uUpload.lists.filter(val => {
								return val.progress == 100;
							})
							// 如果您不需要进行太多的处理，直接如下即可
							// files = this.$refs.uUpload.lists;
							if (files.length) {
								if(files[0].response){
									this.form.photo = $imgUrl+files[0].response.fileurl
								}else{
									this.form.photo = files[0].url
								}
							}
							this.form.ownerId = uni.getStorageSync('ownerId')
							saveAdvice(this.form).then(res => {
								this.loading = false
								this.$u.toast('投诉成功')
								setTimeout(() => {
									this.$u.route({
										type: 'back'
									})
								}, 1000)
							}).catch(err => {
								this.loading = false
							})
						} else {
							console.log('验证失败');
						}
					})
				)
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style>
	page {
		background-color: #f1f1f1;
	}

	.box {
		background-color: #FFFFFF;
		border-radius: 8rpx;
		padding: 20rpx;
	}
</style>
